<template>
  <div class="oauth_login_box">
    <div class="background_color">
      <div>
        <div class="logo_box">
          <div>
            <img :src="loginInLogoUrl" class="yun_logo" />
          </div>
          <div class="name_font">统一认证中心</div>
        </div>
        <Row class="oauth_form_box">
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
            <div class="oauth_form_box_login">
              <!-- <div class="triangle-topright" @click="handleQrCodeSignIn(!showQrCodeSignIn)">
                <img
                  v-if="!showQrCodeSignIn"
                  src="https://manager-1254950508.cosgz.myqcloud.com/2024040309447189c3932e0-754c-11ea-882f-93a245acd5f3.png"
                />
                <img
                  v-if="showQrCodeSignIn"
                  src="https://manager-1254950508.cosgz.myqcloud.com/202404071753623966b2780-78b5-11ea-8ec4-67f044702c4b.png"
                />
              </div> -->
              <div class="oauth_form">
                <transition name="slide-fade">
                  <QrCodeSignIn
                    v-if="showQrCodeSignIn"
                    class="qr-code-main"
                    signInType="tengyun_oauth2"
                    :clientId="$route.query.client_id"
                    @onSignInSuccess="handleQrCodeSignInSuccess"
                  />
                  <div v-else>
                    <div style="text-align: center">
                      <Avatar :src="clientIcon" :size="70" />
                    </div>
                    <div style="text-align: center">
                      <span>登陆到</span>
                      <span style="font-weight: bold;">统一认证中心</span>
                    </div>
                    <div style="text-align: center">
                      <span>以继续访问</span>
                      <span style="font-weight: bold;">{{clientName}}</span>
                    </div>
                    <Tabs value="passwordFormRule" @on-click="handleSigninSwitch">
                      <TabPane label="密码登陆" name="passwordFormRule">
                        <Form ref="passwordFormRule" :model="formData" :rules="passwordFormRule">
                          <FormItem prop="user" label="用户">
                            <Input
                              type="text"
                              v-model="formData.user"
                              placeholder="请输入email / phone"
                            />
                          </FormItem>
                          <FormItem prop="password" label="密码">
                            <Input type="password" v-model="formData.password" placeholder="请输入密码" />
                          </FormItem>
                        </Form>
                      </TabPane>
                      <TabPane label="短信登陆" name="smsFormRule">
                        <Form ref="smsFormRule" :model="formData" :rules="smsFormRule">
                          <FormItem prop="phone" label="电话">
                            <Input type="text" v-model="formData.phone" placeholder="请输入电话号码" />
                          </FormItem>
                          <FormItem prop="smsCode" label="验证码">
                            <Input type="text" v-model="formData.smsCode" placeholder="请输入短信验证码">
                              <span slot="append" style="color: #2d8cf0">
                                <Button
                                  type="primary"
                                  @click="handleSendSms"
                                  :disabled="disableSendSms"
                                >{{smsText}}</Button>
                              </span>
                            </Input>
                          </FormItem>
                        </Form>
                      </TabPane>
                    </Tabs>
                    <div class="forget_password">
                      <router-link to="/resetPassword">重置密码</router-link>
                    </div>
                    <Button
                      type="primary"
                      @click="handleSubmit(signinType)"
                      long
                      :loading="loginLoading"
                    >登陆</Button>
                  </div>
                </transition>
              </div>
            </div>
          </Col>
          <!-- <Col :xs="0" :sm="0" :md="12" :lg="12" :xl="12" :xxl="12">
            <div class="app_qrcode_box">
              <div class="app_qrcode">
                <img
                  src="https://tmch-jpxl-1254950508.file.myqcloud.com/222A17EC-F1CC-C1A1-242D.jpg"
                  class="app_qrcode_img"
                />
              </div>
              <div class="official_documents_and_correspondence">
                <div>更多精彩 更优服务</div>
                <div>下载APP</div>
              </div>
            </div>
          </Col> -->
        </Row>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Form,
  FormItem,
  Input,
  Avatar,
  Button,
  Message,
  Tabs,
  TabPane,
  Row,
  Col
} from "view-design";
import Uuid from "uuid";
import config from "@/utils/config";
import appService from "@/utils/appService";
import QrCodeSignIn from "../QrCodeSignIn";
export default {
  components: {
    Form,
    FormItem,
    Input,
    Avatar,
    Button,
    Tabs,
    TabPane,
    Row,
    Col,
    QrCodeSignIn
  },
  data() {
    return {
      loginInLogoUrl: require("@/assets/shimingrenzheng.png"),
      showQrCodeSignIn: false,
      loginLoading: false,
      config: config,
      smsText: "发送验证码",
      disableSendSms: false,
      clientName: "",
      clientIcon: config.publicPath + "static/unknown_oauth2_client.svg",
      signinType: "passwordFormRule",
      formData: {
        user: null,
        password: null,
        smsCode: null,
        phone: null
      },
      passwordFormRule: {
        user: [
          {
            required: true,
            message: "请输入邮箱或电话号码",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码.",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码不能低于6位",
            trigger: "blur"
          }
        ]
      },
      smsFormRule: {
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur"
          }
        ],
        smsCode: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  async beforeMount() {
    let query = this.$route.query;
    let clientId = query.client_id;
    if (clientId) {
      let resposne = await appService.getRequest(
        `${config.serverProxy}${config.authServicePath}/application/getBaseInfo`,
        { clientId: clientId }
      );
      if (resposne.status === 200 && resposne.data.errorCode === 0) {
        this.clientName = resposne.data.data.name;
        if (resposne.data.data.iconUrl) {
          this.clientIcon = resposne.data.data.iconUrl;
        }
      }
    }
  },
  methods: {
    handleQrCodeSignIn(show) {
      this.showQrCodeSignIn = show;
    },
    handleQrCodeSignInSuccess(data) {
      let query = this.$route.query;
      let slipt = "?";
      if (query.redirect_uri.indexOf("?") !== -1) {
        slipt = "&";
      }
      window.open(
        `${query.redirect_uri}${slipt}code=${data.oauth2Code}&state=${query.state}`,
        "_self"
      );
    },
    handleSubmit(rule) {
      let query = this.$route.query;
      if (!query.client_id) {
        Message.error("无效client_id");
        return;
      }
      if (!query.scope) {
        Message.error("无效scope");
        return;
      }
      if (!query.redirect_uri) {
        Message.error("无效redirect_uri");
        return;
      }
      this.$refs[rule].validate(async valid => {
        let vm = this;
        if (valid) {
          vm.loginLoading = true;
          let urlParm = `?client_id=${query.client_id}&scope=${query.scope}&redirect_uri=${query.redirect_uri}`;
          if (query.state) {
            urlParm = urlParm + "&state=" + query.state;
          }
          if (query.response_type) {
            urlParm = urlParm + "&response_type=" + query.response_type;
          }
          let formData = JSON.parse(JSON.stringify(vm.formData));
          if (vm.signinType === "passwordFormRule") {
            var reg = /^\d+$/;
            if (reg.test(formData.user)) {
              formData.phone = formData.user;
            } else {
              formData.email = formData.user;
            }
            delete formData.user;
          } else {
            delete formData.password;
          }
          let resposne = await appService.postRequest(
            `${config.serverProxy}${config.authServicePath}/auth/oauth2/authorization${urlParm}`,
            formData
          );
          console.log('oauth2 login:',resposne)
          if (resposne.status === 200 && resposne.data.errorCode === 0) {
            let slipt = "?";
            if (query.redirect_uri.indexOf("?") !== -1) {
              slipt = "&";
            }
            console.log(`${query.redirect_uri}${slipt}code=${resposne.data.data}&state=${query.state}`)
            window.open(
              `${query.redirect_uri}${slipt}code=${resposne.data.data}&state=${query.state}`,
              "_self"
            );
          } else {
            vm.loginLoading = false;
          }
        }
      });
    },
    handleSigninSwitch(name) {
      if (name === "passwordFormRule") {
        this.formData.smsCode = null;
        this.formData.phone = null;
        this.signinType = "passwordFormRule";
      } else if (name === "smsFormRule") {
        this.formData.user = null;
        this.formData.password = null;
        this.signinType = "smsFormRule";
      }
    },
    async handleSendSms() {
      let formData = this.formData;
      if (!formData.phone) {
        Message.error("请填写号码");
      } else {
        let resposne = await appService.getRequest(
          `${config.serverProxy}${config.authServicePath}/sms/getLoginCode`,
          { phone: formData.phone }
        );
        if (resposne.data.errorCode === 0) {
          this.disableSendSms = true;
          let countdown = 60;
          let point = window.setInterval(() => {
            if (countdown == 0) {
              this.disableSendSms = false;
              this.smsText = "发送验证码";
              window.clearInterval(point);
            } else {
              this.smsText = countdown + "s";
              countdown = countdown - 1;
            }
          }, 1000);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.oauth_login_box {
  height: 100%;
  background-image: url(../../assets/login_bg.jpg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  .background_color {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.288235294117647);
    display: flex;
    align-items: center;
    justify-content: center;
    .logo_box {
      display: flex;
      justify-content: center;
      padding: 20px;
      .yun_logo {
        width: 50px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .name_font {
        font-weight: 700;
        font-style: normal;
        font-size: 28px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
      }
    }
    .oauth_form_box {
      display: flex;
      justify-content: center;
      background-color: #efefef;
      max-width: 640px;
      .oauth_form_box_login {
        width: 400px;
        min-height: 400px;
        background: #ffffff;
        .triangle-topright {
          width: 40px;
          height: 40px;
          position: absolute;
          right: 0px;
          top: 0px;
          z-index: 2;
          &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-bottom: 40px solid #ffffff;
            border-right: 40px solid transparent;
            position: absolute;
            left: 0;
            top: 0;
          }
          & > img {
            width: 40px;
            height: 40px;
            position: relative;
          }
        }
        .oauth_form {
          background: #ffffff;
          padding: 20px;
          min-height: 440px;
          .qr-code-main {
            position: absolute;
            top: 0;
            left: 0;
          }
          .forget_password {
            color: #999;
            text-align: right;
          }
        }
      }
      .app_qrcode_box {
        width: 300px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        .app_qrcode {
          .app_qrcode_img {
            width: 200px;
            height: 200px;
          }
        }
        .official_documents_and_correspondence {
          padding-top: 20px;
          transform-origin: 76.5px 28px 0px;
          font-weight: 400;
          font-style: normal;
          font-size: 20px;
        }
      }
    }
  }
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>


